<script lang="ts" module>
	export type IconName =
		| 'play'
		| 'playing'
		| 'pause'
		| 'stop'
		| 'sort'
		| 'filter'
		| 'expand'
		| 'double_left'
		| 'double_right'
		| 'search'
		| 'x'
		| 'github'
		| 'discord'
		| 'tiktok'
		| 'facebook'
		| 'linkedin'
		| 'link'
		| 'edit'
		| 'code'
		| 'spotify'
		| 'apple-podcasts'
		| 'minimize'
		| 'back-30'
		| 'forward-30'
		| 'share'
		| 'monitor'
		| 'download'
		| 'instagram'
		| 'threads'
		| 'thumbtack'
		| 'youtube';
</script>

<script lang="ts">
	import { capitalize } from '$utilities/capitalize';

	interface Props {
		name: IconName;
		title?: string | boolean;
		aria_hidden?: boolean;
	}

	let { name, title = $bindable(''), aria_hidden = true }: Props = $props();
	if (!title && title !== false) title = capitalize(name);
</script>

{#if name === 'play'}
	<svg
		style="width: var(--icon_size, 16px);"
		viewBox="0 0 8 10"
		aria-hidden={aria_hidden}
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<title>{title}</title>
		<path
			d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z"
			fill="currentColor"
		/>
	</svg>
{/if}
{#if name === 'playing'}
	<svg
		xmlns="http://www.w3.org/2000/svg"
		style="width: var(--icon_size, 16px);"
		viewBox="0 0 16 16"
		class="playing"
	>
		<line x1="7.5" y1="1" x2="7.5" y2="15" stroke="#000000" stroke-width="2" />
		<line x1="11.5" y1="1" x2="11.5" y2="15" stroke="#000000" stroke-width="2" />
		<line x1="3.5" y1="1" x2="3.5" y2="15" stroke="#000000" stroke-width="2" />
	</svg>
{/if}

{#if name === 'pause'}
	<svg
		style="width: var(--icon_size, 16px);"
		viewBox="0 0 8 10"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<title>{title}</title>
		<path
			fill="currentColor"
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V9C0 9.26522 0.105357 9.51957 0.292893 9.70711C0.48043 9.89464 0.734784 10 1 10H2C2.26522 10 2.51957 9.89464 2.70711 9.70711C2.89464 9.51957 3 9.26522 3 9V1C3 0.734784 2.89464 0.48043 2.70711 0.292893C2.51957 0.105357 2.26522 0 2 0H1ZM6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V9C5 9.26522 5.10536 9.51957 5.29289 9.70711C5.48043 9.89464 5.73478 10 6 10H7C7.26522 10 7.51957 9.89464 7.70711 9.70711C7.89464 9.51957 8 9.26522 8 9V1C8 0.734784 7.89464 0.48043 7.70711 0.292893C7.51957 0.105357 7.26522 0 7 0H6Z"
		/>
	</svg>
{/if}

{#if name === 'sort'}
	<svg
		xmlns="http://www.w3.org/2000/svg"
		style="width: var(--icon_size, 16px);"
		viewBox="0 0 16 16"
	>
		<title>{title}</title>
		<path
			fill="currentColor"
			fill-rule="evenodd"
			d="m3 14l.53-.53l2.25-2.25a.75.75 0 0 0-1.06-1.061l-.97.97v-8.38a.75.75 0 0 0-1.5 0v8.38l-.97-.97a.75.75 0 1 0-1.06 1.06l2.25 2.25L3 14ZM8.75 4a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 3.25a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-4.5Zm-.75 4a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75Z"
			clip-rule="evenodd"
		/></svg
	>
{/if}

{#if name === 'filter'}
	<svg
		xmlns="http://www.w3.org/2000/svg"
		style="width: var(--icon_size, 16px);"
		viewBox="0 0 16 16"
	>
		<title>{title}</title>
		<path
			fill="currentColor"
			fill-rule="evenodd"
			d="m8.5 8.379l.44-.44l4.56-4.56V2.5h-11v.879l4.56 4.56l.44.44v4l1-1v-3ZM10 12l-2.5 2.5L6 16V9L1.293 4.293A1 1 0 0 1 1 3.586V2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v1.586a1 1 0 0 1-.293.707L10 9v3Z"
			clip-rule="evenodd"
		/></svg
	>
{/if}

{#if name === 'double_left'}
	<svg
		xmlns="http://www.w3.org/2000/svg"
		style="width: var(--icon_size, 16px);"
		viewBox="0 0 16 16"
	>
		<title>{title}</title>
		<path
			fill="currentColor"
			fill-rule="evenodd"
			d="M7.721 2.22a.75.75 0 0 1 1.061 1.06L4.061 8.002l4.721 4.721a.75.75 0 0 1-1.06 1.061L2.47 8.532a.75.75 0 0 1 0-1.06L7.722 2.22Zm5 0a.75.75 0 0 1 1.061 1.06L9.061 8.002l4.721 4.721a.75.75 0 0 1-1.06 1.061L7.47 8.532a.75.75 0 0 1 0-1.06l5.252-5.252Z"
			clip-rule="evenodd"
		/></svg
	>
{/if}
{#if name === 'double_right'}
	<svg
		xmlns="http://www.w3.org/2000/svg"
		style="width: var(--icon_size, 16px);"
		viewBox="0 0 16 16"
	>
		<title>{title}</title>
		<path
			fill="currentColor"
			fill-rule="evenodd"
			d="M3.53 2.22a.75.75 0 0 0-1.06 1.06l4.72 4.722l-4.72 4.721a.75.75 0 0 0 1.06 1.061l5.252-5.252a.75.75 0 0 0 0-1.06L3.53 2.22Zm5 0a.75.75 0 0 0-1.06 1.06l4.721 4.722l-4.721 4.721a.75.75 0 0 0 1.06 1.061l5.252-5.252a.75.75 0 0 0 0-1.06L8.53 2.22Z"
			clip-rule="evenodd"
		/></svg
	>
{/if}

{#if name === 'x'}
	<svg fill="currentColor" style="width: var(--icon_size, 16px);" viewBox="0 0 24 24">
		<title>{title}</title>
		<path
			d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
		></path></svg
	>
{/if}
{#if name === 'expand'}
	<svg
		xmlns="http://www.w3.org/2000/svg"
		style="width: var(--icon_size, 16px);"
		viewBox="0 0 16 16"
	>
		<title>{title}</title>
		<path
			fill="currentColor"
			fill-rule="evenodd"
			d="M11.78 5.841a.75.75 0 0 1-1.06 0l-1.97-1.97v7.379a.75.75 0 0 1-1.5 0V3.871l-1.97 1.97a.75.75 0 0 1-1.06-1.06l3.25-3.25L8 1l.53.53l3.25 3.25a.75.75 0 0 1 0 1.061ZM3.75 13.5a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"
			clip-rule="evenodd"
		/></svg
	>
{/if}

{#if name === 'search'}
	<svg
		xmlns="http://www.w3.org/2000/svg"
		style="width: var(--icon_size, 16px);"
		viewBox="0 0 16 16"
	>
		<title>{title}</title>
		<path
			fill="currentColor"
			fill-rule="evenodd"
			d="M11.5 7a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0Zm-.82 4.74a6 6 0 1 1 1.06-1.06l3.04 3.04a.75.75 0 1 1-1.06 1.06l-3.04-3.04Z"
			clip-rule="evenodd"
		/></svg
	>
{/if}
{#if name === 'github'}
	<svg
		xmlns="http://www.w3.org/2000/svg"
		style="width: var(--icon_size, 16px);"
		viewBox="0 0 16 16"
	>
		<title>{title}</title>
		<path
			fill="currentColor"
			fill-rule="evenodd"
			d="M7.976 0A7.977 7.977 0 0 0 0 7.976c0 3.522 2.3 6.507 5.431 7.584c.392.049.538-.196.538-.392v-1.37c-2.201.49-2.69-1.076-2.69-1.076c-.343-.93-.881-1.175-.881-1.175c-.734-.489.048-.489.048-.489c.783.049 1.224.832 1.224.832c.734 1.223 1.859.88 2.3.685c.048-.538.293-.88.489-1.076c-1.762-.196-3.621-.881-3.621-3.964c0-.88.293-1.566.832-2.153c-.05-.147-.343-.978.098-2.055c0 0 .685-.196 2.201.832c.636-.196 1.322-.245 2.007-.245s1.37.098 2.006.245c1.517-1.027 2.202-.832 2.202-.832c.44 1.077.146 1.908.097 2.104a3.16 3.16 0 0 1 .832 2.153c0 3.083-1.86 3.719-3.62 3.915c.293.244.538.733.538 1.467v2.202c0 .196.146.44.538.392A7.984 7.984 0 0 0 16 7.976C15.951 3.572 12.38 0 7.976 0Z"
			clip-rule="evenodd"
		/></svg
	>
{/if}

{#if name === 'tiktok'}
	<svg
		fill="currentColor"
		viewBox="0 0 32 32"
		style="width: var(--icon_size, 16px);"
		version="1.1"
		xmlns="http://www.w3.org/2000/svg"
	>
		<title>{title}</title>
		<path
			d="M16.656 1.029c1.637-0.025 3.262-0.012 4.886-0.025 0.054 2.031 0.878 3.859 2.189 5.213l-0.002-0.002c1.411 1.271 3.247 2.095 5.271 2.235l0.028 0.002v5.036c-1.912-0.048-3.71-0.489-5.331-1.247l0.082 0.034c-0.784-0.377-1.447-0.764-2.077-1.196l0.052 0.034c-0.012 3.649 0.012 7.298-0.025 10.934-0.103 1.853-0.719 3.543-1.707 4.954l0.020-0.031c-1.652 2.366-4.328 3.919-7.371 4.011l-0.014 0c-0.123 0.006-0.268 0.009-0.414 0.009-1.73 0-3.347-0.482-4.725-1.319l0.040 0.023c-2.508-1.509-4.238-4.091-4.558-7.094l-0.004-0.041c-0.025-0.625-0.037-1.25-0.012-1.862 0.49-4.779 4.494-8.476 9.361-8.476 0.547 0 1.083 0.047 1.604 0.136l-0.056-0.008c0.025 1.849-0.050 3.699-0.050 5.548-0.423-0.153-0.911-0.242-1.42-0.242-1.868 0-3.457 1.194-4.045 2.861l-0.009 0.030c-0.133 0.427-0.21 0.918-0.21 1.426 0 0.206 0.013 0.41 0.037 0.61l-0.002-0.024c0.332 2.046 2.086 3.59 4.201 3.59 0.061 0 0.121-0.001 0.181-0.004l-0.009 0c1.463-0.044 2.733-0.831 3.451-1.994l0.010-0.018c0.267-0.372 0.45-0.822 0.511-1.311l0.001-0.014c0.125-2.237 0.075-4.461 0.087-6.698 0.012-5.036-0.012-10.060 0.025-15.083z"
		/>
	</svg>
{/if}
{#if name === 'discord'}
	<svg fill="currentColor" viewBox="0 0 71 55" style="width: var(--icon_size, 16px);">
		<title>{title}</title>
		<path
			fill-rule="evenodd"
			d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"
			clip-rule="evenodd"
		></path></svg
	>
{/if}
{#if name === 'download'}
	<svg fill="currentColor" viewBox="0 0 24 24" style="width: var(--icon_size, 24px);">
		<g id="Complete">
			<g id="download">
				<g>
					<path
						d="M3,12.3v7a2,2,0,0,0,2,2H19a2,2,0,0,0,2-2v-7"
						stroke="currentColor"
						fill="none"
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
					/>

					<g>
						<polyline
							data-name="Right"
							fill="none"
							id="Right-2"
							points="7.9 12.3 12 16.3 16.1 12.3"
							stroke="currentColor"
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
						/>

						<line
							fill="none"
							stroke="currentColor"
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							x1="12"
							x2="12"
							y1="2.7"
							y2="14.2"
						/>
					</g>
				</g>
			</g>
		</g></svg
	>
{/if}
{#if name === 'edit'}
	<svg fill="currentColor" viewBox="0 0 24 24" style="width: var(--icon_size, 24px);">
		<path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"
			fill="#currentColor"
		/>
	</svg>
{/if}

{#if name === 'spotify'}
	<svg
		fill="currentColor"
		viewBox="0 0 50 50"
		style="width: var(--icon_size, 24px); fill: var(--icon_color, #1ED760);"
	>
		<path
			d="M25.009,1.982C12.322,1.982,2,12.304,2,24.991S12.322,48,25.009,48s23.009-10.321,23.009-23.009S37.696,1.982,25.009,1.982z M34.748,35.333c-0.289,0.434-0.765,0.668-1.25,0.668c-0.286,0-0.575-0.081-0.831-0.252C30.194,34.1,26,33,22.5,33.001 c-3.714,0.002-6.498,0.914-6.526,0.923c-0.784,0.266-1.635-0.162-1.897-0.948s0.163-1.636,0.949-1.897 c0.132-0.044,3.279-1.075,7.474-1.077C26,30,30.868,30.944,34.332,33.253C35.022,33.713,35.208,34.644,34.748,35.333z M37.74,29.193 c-0.325,0.522-0.886,0.809-1.459,0.809c-0.31,0-0.624-0.083-0.906-0.26c-4.484-2.794-9.092-3.385-13.062-3.35 c-4.482,0.04-8.066,0.895-8.127,0.913c-0.907,0.258-1.861-0.272-2.12-1.183c-0.259-0.913,0.272-1.862,1.184-2.12 c0.277-0.079,3.854-0.959,8.751-1c4.465-0.037,10.029,0.61,15.191,3.826C37.995,27.328,38.242,28.388,37.74,29.193z M40.725,22.013 C40.352,22.647,39.684,23,38.998,23c-0.344,0-0.692-0.089-1.011-0.275c-5.226-3.068-11.58-3.719-15.99-3.725 c-0.021,0-0.042,0-0.063,0c-5.333,0-9.44,0.938-9.481,0.948c-1.078,0.247-2.151-0.419-2.401-1.495 c-0.25-1.075,0.417-2.149,1.492-2.4C11.729,16.01,16.117,15,21.934,15c0.023,0,0.046,0,0.069,0 c4.905,0.007,12.011,0.753,18.01,4.275C40.965,19.835,41.284,21.061,40.725,22.013z"
		></path>
	</svg>
{/if}

{#if name === 'apple-podcasts'}
	<svg
		width="24"
		height="24"
		viewBox="0 0 24 24"
		fill="currentColor"
		style="width: var(--icon_size, 24px); fill: var(--icon_color, #9933CC);"
	>
		<path
			d="M20 0H4C1.79467 0 0 1.79467 0 4V20C0 22.2053 1.79467 24 4 24H20C22.2053 24 24 22.2053 24 20V4C24 1.79467 22.2053 0 20 0ZM13.34 20.372C13.1 21.0627 12.4413 21.3333 12 21.3333C11.5587 21.3333 10.9 21.0627 10.66 20.372C10.42 19.6813 10 17.2907 10 15.688C10 14.0853 11.4187 14 12 14C12.5813 14 14 14.0867 14 15.688C14 17.2907 13.5787 19.6813 13.34 20.372ZM10.3333 11C10.3333 10.08 11.08 9.33333 12 9.33333C12.92 9.33333 13.6667 10.08 13.6667 11C13.6667 11.92 12.92 12.6667 12 12.6667C11.08 12.6667 10.3333 11.92 10.3333 11ZM12 7.33333C9.79467 7.33333 8 9.128 8 11.3333C8 12.4053 8.42933 13.376 9.11867 14.0947C8.88267 14.4893 8.74267 14.9573 8.69733 15.488C7.46933 14.5093 6.66667 13.0213 6.66667 11.3333C6.66667 8.392 9.05867 6 12 6C14.9413 6 17.3333 8.392 17.3333 11.3333C17.3333 13.0213 16.5307 14.5093 15.304 15.488C15.2587 14.9587 15.1173 14.4893 14.8827 14.0947C15.5707 13.376 16 12.4053 16 11.3333C16 9.128 14.2053 7.33333 12 7.33333ZM15.1107 18.704C15.18 18.176 15.2387 17.632 15.2773 17.1027C17.2907 15.9533 18.6667 13.812 18.6667 11.3333C18.6667 7.65733 15.676 4.66667 12 4.66667C8.324 4.66667 5.33333 7.65733 5.33333 11.3333C5.33333 13.812 6.70933 15.9533 8.72267 17.1027C8.76267 17.632 8.82 18.176 8.88933 18.704C6.01867 17.488 4 14.6427 4 11.3333C4 6.92133 7.588 3.33333 12 3.33333C16.412 3.33333 20 6.92133 20 11.3333C20 14.6427 17.9813 17.488 15.1107 18.704Z"
		/>
	</svg>
{/if}

{#if name === 'back-30'}
	<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M0.480774 15.3505L1.54327 15.2216C1.57713 15.4924 1.66827 15.6994 1.81671 15.8427C1.96515 15.9859 2.14484 16.0575 2.35577 16.0575C2.58234 16.0575 2.77244 15.9716 2.92609 15.7997C3.08234 15.6278 3.16046 15.396 3.16046 15.1044C3.16046 14.8283 3.08624 14.6096 2.93781 14.4481C2.78937 14.2867 2.60838 14.2059 2.39484 14.2059C2.25421 14.2059 2.08624 14.2333 1.89093 14.288L2.01202 13.3934C2.3089 13.4013 2.53546 13.3375 2.69171 13.202C2.84796 13.064 2.92609 12.8817 2.92609 12.6552C2.92609 12.4625 2.86879 12.3088 2.75421 12.1942C2.63963 12.0796 2.48728 12.0223 2.29718 12.0223C2.10968 12.0223 1.94952 12.0875 1.81671 12.2177C1.6839 12.3479 1.60317 12.538 1.57452 12.788L0.562805 12.6161C0.633118 12.2697 0.738586 11.9937 0.879211 11.788C1.02244 11.5796 1.22036 11.4169 1.47296 11.2997C1.72817 11.1799 2.01333 11.12 2.32843 11.12C2.86749 11.12 3.29978 11.2919 3.62531 11.6356C3.89353 11.9169 4.02765 12.2346 4.02765 12.5888C4.02765 13.0914 3.75291 13.4924 3.20343 13.7919C3.53156 13.8622 3.79327 14.0197 3.98859 14.2645C4.1865 14.5093 4.28546 14.8049 4.28546 15.1513C4.28546 15.6539 4.10187 16.0822 3.73468 16.4364C3.36749 16.7906 2.91046 16.9677 2.36359 16.9677C1.84536 16.9677 1.41567 16.8192 1.07452 16.5223C0.733378 16.2229 0.535461 15.8322 0.480774 15.3505ZM6.82843 11.12C7.38312 11.12 7.81671 11.3179 8.12921 11.7138C8.50161 12.1825 8.68781 12.9598 8.68781 14.0458C8.68781 15.1291 8.50031 15.9078 8.12531 16.3817C7.81541 16.7723 7.38312 16.9677 6.82843 16.9677C6.27114 16.9677 5.82192 16.7541 5.48077 16.327C5.13963 15.8973 4.96906 15.133 4.96906 14.0341C4.96906 12.9559 5.15656 12.1799 5.53156 11.7059C5.84145 11.3153 6.27374 11.12 6.82843 11.12ZM6.82843 12.0302C6.69562 12.0302 6.57713 12.0731 6.47296 12.1591C6.36879 12.2424 6.28807 12.3934 6.23077 12.6122C6.15525 12.896 6.11749 13.3739 6.11749 14.0458C6.11749 14.7177 6.15135 15.1799 6.21906 15.4325C6.28676 15.6825 6.3714 15.8492 6.47296 15.9325C6.57713 16.0158 6.69562 16.0575 6.82843 16.0575C6.96124 16.0575 7.07973 16.0158 7.1839 15.9325C7.28807 15.8466 7.36879 15.6942 7.42609 15.4755C7.50161 15.1942 7.53937 14.7177 7.53937 14.0458C7.53937 13.3739 7.50551 12.913 7.43781 12.663C7.3701 12.4104 7.28416 12.2424 7.17999 12.1591C7.07843 12.0731 6.96124 12.0302 6.82843 12.0302Z"
			fill="currentColor"
		/>
		<path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M8 3.16667C8 2.98986 7.93679 2.82029 7.82426 2.69526C7.71174 2.57024 7.55913 2.5 7.4 2.5L2.6 2.5C2.44087 2.5 2.28826 2.57024 2.17574 2.69526C2.06321 2.82029 2 2.98986 2 3.16667L2 3.83333C2 4.01014 2.06321 4.17971 2.17574 4.30474C2.28826 4.42976 2.44087 4.5 2.6 4.5L7.4 4.5C7.55913 4.5 7.71174 4.42976 7.82426 4.30474C7.93679 4.17971 8 4.01014 8 3.83333L8 3.16667Z"
			fill="currentColor"
		/>
		<path
			d="M0.231687 3.98579C0.160397 3.93237 0.101962 3.8601 0.0615511 3.77537C0.0211403 3.69064 -2.90656e-07 3.59606 -2.82258e-07 3.5C-2.73861e-07 3.40394 0.0211403 3.30936 0.0615511 3.22463C0.101962 3.1399 0.160397 3.06763 0.231687 3.01421L4.23247 0.0903865C4.56561 -0.152507 5 0.122586 5 0.576875L5 6.42313C5 6.87741 4.56561 7.15251 4.23247 6.90961L0.231687 3.98579Z"
			fill="currentColor"
		/>
	</svg>
{/if}
{#if name === 'forward-30'}
	<svg width="9" height="19" viewBox="0 0 9 19" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M0.300781 15.3505L1.36328 15.2216C1.39714 15.4924 1.48828 15.6994 1.63672 15.8427C1.78516 15.9859 1.96484 16.0575 2.17578 16.0575C2.40234 16.0575 2.59245 15.9716 2.74609 15.7997C2.90234 15.6278 2.98047 15.396 2.98047 15.1044C2.98047 14.8283 2.90625 14.6096 2.75781 14.4481C2.60938 14.2867 2.42839 14.2059 2.21484 14.2059C2.07422 14.2059 1.90625 14.2333 1.71094 14.288L1.83203 13.3934C2.12891 13.4013 2.35547 13.3375 2.51172 13.202C2.66797 13.064 2.74609 12.8817 2.74609 12.6552C2.74609 12.4625 2.6888 12.3088 2.57422 12.1942C2.45964 12.0796 2.30729 12.0223 2.11719 12.0223C1.92969 12.0223 1.76953 12.0875 1.63672 12.2177C1.50391 12.3479 1.42318 12.538 1.39453 12.788L0.382812 12.6161C0.453125 12.2697 0.558594 11.9937 0.699219 11.788C0.842448 11.5796 1.04036 11.4169 1.29297 11.2997C1.54818 11.1799 1.83333 11.12 2.14844 11.12C2.6875 11.12 3.11979 11.2919 3.44531 11.6356C3.71354 11.9169 3.84766 12.2346 3.84766 12.5888C3.84766 13.0914 3.57292 13.4924 3.02344 13.7919C3.35156 13.8622 3.61328 14.0197 3.80859 14.2645C4.00651 14.5093 4.10547 14.8049 4.10547 15.1513C4.10547 15.6539 3.92188 16.0822 3.55469 16.4364C3.1875 16.7906 2.73047 16.9677 2.18359 16.9677C1.66536 16.9677 1.23568 16.8192 0.894531 16.5223C0.553385 16.2229 0.355469 15.8322 0.300781 15.3505ZM6.64844 11.12C7.20312 11.12 7.63672 11.3179 7.94922 11.7138C8.32161 12.1825 8.50781 12.9598 8.50781 14.0458C8.50781 15.1291 8.32031 15.9078 7.94531 16.3817C7.63542 16.7723 7.20312 16.9677 6.64844 16.9677C6.09115 16.9677 5.64193 16.7541 5.30078 16.327C4.95964 15.8973 4.78906 15.133 4.78906 14.0341C4.78906 12.9559 4.97656 12.1799 5.35156 11.7059C5.66146 11.3153 6.09375 11.12 6.64844 11.12ZM6.64844 12.0302C6.51562 12.0302 6.39714 12.0731 6.29297 12.1591C6.1888 12.2424 6.10807 12.3934 6.05078 12.6122C5.97526 12.896 5.9375 13.3739 5.9375 14.0458C5.9375 14.7177 5.97135 15.1799 6.03906 15.4325C6.10677 15.6825 6.19141 15.8492 6.29297 15.9325C6.39714 16.0158 6.51562 16.0575 6.64844 16.0575C6.78125 16.0575 6.89974 16.0158 7.00391 15.9325C7.10807 15.8466 7.1888 15.6942 7.24609 15.4755C7.32161 15.1942 7.35938 14.7177 7.35938 14.0458C7.35938 13.3739 7.32552 12.913 7.25781 12.663C7.1901 12.4104 7.10417 12.2424 7 12.1591C6.89844 12.0731 6.78125 12.0302 6.64844 12.0302Z"
			fill="currentColor"
		/>
		<path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M7 3.16667C7 2.98986 6.93679 2.82029 6.82426 2.69526C6.71174 2.57024 6.55913 2.5 6.4 2.5L1.6 2.5C1.44087 2.5 1.28826 2.57024 1.17574 2.69526C1.06321 2.82029 1 2.98986 1 3.16667L1 3.83333C1 4.01014 1.06321 4.17971 1.17574 4.30474C1.28826 4.42976 1.44087 4.5 1.6 4.5L6.4 4.5C6.55913 4.5 6.71174 4.42976 6.82426 4.30474C6.93679 4.17971 7 4.01014 7 3.83333L7 3.16667Z"
			fill="currentColor"
		/>
		<path
			d="M8.58832 3.98579C8.65961 3.93237 8.71805 3.8601 8.75846 3.77537C8.79887 3.69064 8.82001 3.59606 8.82001 3.5C8.82001 3.40394 8.79887 3.30936 8.75846 3.22463C8.71805 3.1399 8.65961 3.06763 8.58832 3.01421L4.58754 0.0903865C4.2544 -0.152507 3.82001 0.122586 3.82001 0.576875L3.82001 6.42313C3.82001 6.87741 4.2544 7.15251 4.58754 6.90961L8.58832 3.98579Z"
			fill="currentColor"
		/>
	</svg>
{/if}
{#if name === 'share'}
	<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
		><path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M11.78 5.841a.75.75 0 0 1-1.06 0l-1.97-1.97v7.379a.75.75 0 0 1-1.5 0V3.871l-1.97 1.97a.75.75 0 0 1-1.06-1.06l3.25-3.25L8 1l.53.53 3.25 3.25a.75.75 0 0 1 0 1.061ZM2.5 9.75a.75.75 0 0 0-1.5 0V13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9.75a.75.75 0 0 0-1.5 0V13a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V9.75Z"
			fill="currentColor"
		/></svg
	>
{/if}
{#if name === 'minimize'}
	<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
		><path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M2.22 5.22a.75.75 0 0 0 0 1.06l5.252 5.252a.75.75 0 0 0 1.06 0l5.252-5.252a.75.75 0 1 0-1.06-1.06L8.001 9.94 3.28 5.22a.75.75 0 0 0-1.06 0Z"
			fill="currentColor"
		/></svg
	>
{/if}
{#if name === 'facebook'}
	<svg xmlns="http://www.w3.org/2000/svg" style="width: var(--icon_size, 16px);" viewBox="0 0 24 24"
		><path
			fill="currentColor"
			d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95"
		/></svg
	>
{/if}
{#if name === 'code'}
	<svg style="width: var(--icon_size, 16px);" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
		><path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M9.424 2.023a.75.75 0 0 1 .556.904L7.48 13.42a.75.75 0 0 1-1.46-.348L8.52 2.58a.75.75 0 0 1 .904-.556ZM11.16 4.22a.75.75 0 0 1 1.06 0l3.25 3.25L16 8l-.53.53-3.25 3.25a.75.75 0 1 1-1.06-1.06L13.88 8l-2.72-2.72a.75.75 0 0 1 0-1.06ZM4.84 5.28a.75.75 0 1 0-1.06-1.06L.53 7.47 0 8l.53.53 3.25 3.25a.75.75 0 0 0 1.06-1.06L2.12 8l2.72-2.72Z"
			fill="currentColor"
		/></svg
	>
{/if}
{#if name === 'link'}
	<svg style="width: var(--icon_size, 16px);" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
		><path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M9.929 3.132a2.078 2.078 0 1 1 2.94 2.94l-.65.648a.75.75 0 0 0 1.061 1.06l.649-.648a3.579 3.579 0 0 0-5.06-5.06L6.218 4.72a3.578 3.578 0 0 0 0 5.06.75.75 0 0 0 1.061-1.06 2.078 2.078 0 0 1 0-2.94L9.93 3.132Zm-.15 3.086a.75.75 0 0 0-1.057 1.064c.816.81.818 2.13.004 2.942l-2.654 2.647a2.08 2.08 0 0 1-2.94-2.944l.647-.647a.75.75 0 0 0-1.06-1.06l-.648.647a3.58 3.58 0 0 0 5.06 5.066l2.654-2.647a3.575 3.575 0 0 0-.007-5.068Z"
			fill="currentColor"
		/></svg
	>
{/if}
{#if name === 'linkedin'}
	<svg style="width: var(--icon_size, 16px);" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
		><path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M3 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3Zm1.102 4.297a1.195 1.195 0 1 0 0-2.39 1.195 1.195 0 0 0 0 2.39Zm1 7.516V6.234h-2v6.579h2ZM6.43 6.234h2v.881c.295-.462.943-1.084 2.148-1.084 1.438 0 2.219.953 2.219 2.766 0 .087.008.484.008.484v3.531h-2v-3.53c0-.485-.102-1.438-1.18-1.438-1.079 0-1.17 1.198-1.195 1.982v2.986h-2V6.234Z"
			fill="currentColor"
		/></svg
	>
{/if}
{#if name === 'monitor'}
	<svg
		fill="currentColor"
		height="24"
		width="24"
		version="1.1"
		xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink"
		viewBox="0 0 512 512"
		xml:space="preserve"
	>
		<g>
			<g>
				<path
					d="M512,380.121V38.788H0v341.333h186.182v46.545h-38.788v46.545h217.212v-46.545h-38.788v-46.545H512z M279.273,426.667
			h-46.545v-46.545h46.545V426.667z M46.545,333.576V85.333h418.909v248.242H46.545z"
				/>
			</g>
		</g>
	</svg>
{/if}

{#if name === 'instagram'}
	<svg
		viewBox="0 0 24 24"
		stroke="currentColor"
		stroke-width="2"
		fill="none"
		stroke-linecap="round"
		stroke-linejoin="round"
		><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path
			d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
		></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg
	>
{/if}

{#if name === 'threads'}
	<svg
		height="24"
		width="24"
		version="1.1"
		xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink"
		xml:space="preserve"
		viewBox="0 0 192 192"
	>
		<path
			fill="currentColor"
			class="x19hqcy"
			d="M141.537 88.9883C140.71 88.5919 139.87 88.2104 139.019 87.8451C137.537 60.5382 122.616 44.905 97.5619 44.745C97.4484 44.7443 97.3355 44.7443 97.222 44.7443C82.2364 44.7443 69.7731 51.1409 62.102 62.7807L75.881 72.2328C81.6116 63.5383 90.6052 61.6848 97.2286 61.6848C97.3051 61.6848 97.3819 61.6848 97.4576 61.6855C105.707 61.7381 111.932 64.1366 115.961 68.814C118.893 72.2193 120.854 76.925 121.825 82.8638C114.511 81.6207 106.601 81.2385 98.145 81.7233C74.3247 83.0954 59.0111 96.9879 60.0396 116.292C60.5615 126.084 65.4397 134.508 73.775 140.011C80.8224 144.663 89.899 146.938 99.3323 146.423C111.79 145.74 121.563 140.987 128.381 132.296C133.559 125.696 136.834 117.143 138.28 106.366C144.217 109.949 148.617 114.664 151.047 120.332C155.179 129.967 155.42 145.8 142.501 158.708C131.182 170.016 117.576 174.908 97.0135 175.059C74.2042 174.89 56.9538 167.575 45.7381 153.317C35.2355 139.966 29.8077 120.682 29.6052 96C29.8077 71.3178 35.2355 52.0336 45.7381 38.6827C56.9538 24.4249 74.2039 17.11 97.0132 16.9405C119.988 17.1113 137.539 24.4614 149.184 38.788C154.894 45.8136 159.199 54.6488 162.037 64.9503L178.184 60.6422C174.744 47.9622 169.331 37.0357 161.965 27.974C147.036 9.60668 125.202 0.195148 97.0695 0H96.9569C68.8816 0.19447 47.2921 9.6418 32.7883 28.0793C19.8819 44.4864 13.2244 67.3157 13.0007 95.9325L13 96L13.0007 96.0675C13.2244 124.684 19.8819 147.514 32.7883 163.921C47.2921 182.358 68.8816 191.806 96.9569 192H97.0695C122.03 191.827 139.624 185.292 154.118 170.811C173.081 151.866 172.51 128.119 166.26 113.541C161.776 103.087 153.227 94.5962 141.537 88.9883ZM98.4405 129.507C88.0005 130.095 77.1544 125.409 76.6196 115.372C76.2232 107.93 81.9158 99.626 99.0812 98.6368C101.047 98.5234 102.976 98.468 104.871 98.468C111.106 98.468 116.939 99.0737 122.242 100.233C120.264 124.935 108.662 128.946 98.4405 129.507Z"
		></path>
	</svg>
{/if}

{#if name === 'youtube'}
	<svg
		height="24"
		version="1.1"
		xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink"
		viewBox="0 0 461.001 461.001"
		xml:space="preserve"
		fill="currentColor"
	>
		<g>
			<path
				d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
		c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
		C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607
		c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
			/>
		</g>
	</svg>
{/if}

{#if name === 'thumbtack'}
	<svg style="width: var(--icon_size, 16px);" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
		><path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M11.28 1.22a.75.75 0 0 0-1.26.7L6.69 5.25H4.206c-1.114 0-1.671 1.346-.884 2.134l1.911 1.911-3.72 4.135A2 2 0 0 0 1 14.768V15h.233a2 2 0 0 0 1.337-.513l4.135-3.721 1.911 1.91c.788.788 2.134.23 2.134-.883V9.31l3.33-3.33a.75.75 0 0 0 .7-1.261l-.603-.604-2.293-2.293-.604-.603ZM12.94 5 11 3.06 8.06 6 10 7.94 12.94 5ZM6.69 6.75l2.56 2.56v1.88L4.81 6.75h1.88Z"
			fill="var(--fg)"
		/></svg
	>
{/if}

<style>
	svg {
		height: var(--icon_size, 16px);
	}
	@keyframes pulse {
		0% {
			transform: scaleY(0.2);
		}

		50% {
			transform: scaleY(1);
		}

		100% {
			transform: scaleY(0.2);
		}
	}

	.playing line {
		animation: pulse 1s infinite;
		transform-origin: 100% 100%;
	}

	.playing line:nth-child(2) {
		animation-delay: 0.2s;
	}
	.playing line:nth-child(3) {
		animation-delay: 0.4s;
	}
</style>
